<template>
  <view class="container">
    <view class="success-icon">
      <uni-icons type="checkbox-filled" size="60" color="#52C41A"></uni-icons>
    </view>
    <view class="success-title">购买成功</view>
    
    <view class="button-group">
        <button class="btn primary" @click="backHome">返回首页</button>
        <button class="btn" @click="viewOrder">查看订单</button>
    </view>
    
    <!-- 为你推荐 -->
    <view class="recommend-section">
      <view class="section-title">———— 为你推荐 ————</view>
      <view class="waterfall-container">
        <view class="waterfall-column" v-for="(column, colIndex) in waterfallColumns" :key="colIndex">
          <view
            class="product-item-waterfall"
            v-for="(item, index) in column"
            :key="index"
            @click="goToProductDetail(item)"
          >
            <image :src="item.img" mode="widthFix"></image>
            <view class="product-info-waterfall">
              <view class="product-title">{{ item.title }}</view>
              <view class="product-synopsis">{{ item.synopsis }}</view>
              <view class="product-price">
                <text class="price">¥{{ item.price }}</text>
                <text class="original-price">¥{{ item.original_price }}</text>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import uniIcons from '@dcloudio/uni-ui/lib/uni-icons/uni-icons.vue';
import { public_img } from "@/static/public.js";
import { homeApi } from "@/api/indexAPI.js";

export default {
  components: {
    uniIcons
  },
  data() {
    return {
      orderInfo: {
        orderNo: '202109101234567890',
        amount: '0.00',
        payTime: ''
      },
      // 商品列表数据
      productList: [],
      // 瀑布流列数
      waterfallColumnCount: 2,
      // 瀑布流列数据
      waterfallColumns: [[], []]
    };
  },
  onLoad(options) {
    // 接收订单信息
    if (options.orderInfo) {
      try {
        this.orderInfo = JSON.parse(decodeURIComponent(options.orderInfo));
      } catch (e) {
        console.error('解析订单信息失败', e);
      }
    } else {
      // 默认信息
      const now = new Date();
      this.orderInfo.payTime = now.getFullYear() + '-' + 
        (now.getMonth() + 1).toString().padStart(2, '0') + '-' + 
        now.getDate().toString().padStart(2, '0') + ' ' + 
        now.getHours().toString().padStart(2, '0') + ':' + 
        now.getMinutes().toString().padStart(2, '0') + ':' + 
        now.getSeconds().toString().padStart(2, '0');
    }
    
    // 获取推荐商品
    this.getRecommendProducts();
  },
  methods: {
    viewOrder() {
      uni.navigateTo({
        url: '/pages/order/order'
      });
    },
    backHome() {
      uni.switchTab({
        url: '/pages/index/index'
      });
    },
    // 获取推荐商品
    getRecommendProducts() {
      homeApi.getHomeData().then((res) => {
        if (res.code === 1 && res.data && res.data.list) {
          // 设置商品列表数据
          this.productList = res.data.list.map(item => ({
            ...item,
            img: item.img.startsWith('http') ? item.img : public_img + item.img
          }));
          // 构建瀑布流数据
          this.buildWaterfallData();
        }
      }).catch((err) => {
        console.error('获取推荐商品失败', err);
      });
    },
    // 构建瀑布流数据
    buildWaterfallData() {
      // 初始化列数组
      const columns = Array.from({ length: this.waterfallColumnCount }, () => []);
      
      // 将商品列表按顺序分配到各列
      this.productList.forEach((item, index) => {
        const columnIndex = index % this.waterfallColumnCount;
        columns[columnIndex].push(item);
      });
      
      // 更新瀑布流列数据
      this.waterfallColumns = columns;
    },
    // 跳转到商品详情
    goToProductDetail(item) {
      uni.navigateTo({
        url: `/pages/product/product?id=${item.id}`
      });
    }
  }
};
</script>

<style scoped>
.container {
  width: 100%;
  min-height: 100vh;
  background-color: white;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 100rpx 40rpx;
  box-sizing: border-box;
}

.success-icon {
  width: 120rpx;
  height: 120rpx;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 40rpx;
}

.success-title {
  font-size: 40rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 20rpx;
}

.success-desc {
  font-size: 28rpx;
  color: #666;
  margin-bottom: 80rpx;
}

.order-info {
  width: 100%;
  background-color: #fff;
  border-radius: 10rpx;
  padding: 30rpx;
  margin-bottom: 60rpx;
}

.info-item {
  display: flex;
  justify-content: space-between;
  padding: 20rpx 0;
  border-bottom: 1rpx solid #eee;
}

.info-item:last-child {
  border-bottom: none;
}

.info-label {
  font-size: 28rpx;
  color: #666;
}

.info-value {
  font-size: 28rpx;
  color: #333;
}

.button-group {
  display: flex;
  justify-content: center;
  gap: 30rpx;
}

.btn {
  height: 80rpx;
  border-radius: 10rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32rpx;
  background-color: #ff0000;
  border: 1rpx solid #ff0000;
  color: #fff;
}

.btn.primary {
    background-color: #fff;
    border: 1rpx solid #ccc;
    color: #B3B3B3;
}

.recommend-section {
  width: 100%;
  margin-top: 60rpx;
}

.section-title {
  font-size: 36rpx;
  font-weight: bold;
  color: #646464;
  margin-bottom: 30rpx;
  text-align: center;
}

.waterfall-container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.waterfall-column {
  display: flex;
  flex: 1;
  flex-direction: column;
  margin-right: 10rpx;
}

.waterfall-column:last-child {
  margin-right: 0;
}

.product-item-waterfall {
  background-color: #ffffff;
  border-radius: 10rpx;
  margin-bottom: 20rpx;
  overflow: hidden;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.product-item-waterfall image {
  width: 100%;
}

.product-info-waterfall {
  padding: 20rpx;
}

.product-title {
  font-size: 28rpx;
  color: #333;
  margin-bottom: 10rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.product-synopsis {
  font-size: 24rpx;
  color: #999;
  margin-bottom: 10rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}

.product-price {
  display: flex;
  align-items: center;
}

.price {
  font-size: 32rpx;
  color: #ff0000;
  margin-right: 10rpx;
}

.original-price {
  font-size: 24rpx;
  color: #999;
  text-decoration: line-through;
}
</style>